<template>
  <c-layout>
    <template #header>
      <c-card title="查询条件">
        <c-forms :model="formData" :rules="rules" ref="form" showBtn :ok="submit">
          <c-formitems :form-data="formData" v-for="item in formItems" :key="item.value" :config="item"></c-formitems>
        </c-forms>
      </c-card>
    </template>
    <template #main>
      <c-card title="列表名字">
        <template #right>
          <el-button @click="createRow" type="success">新增</el-button>
        </template>
        <c-table :data="tableData" @changePage="pageChange" @selection-change="tabSelectionChange" selection>
          <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
          <el-table-column prop="aliasName" label="别名" align="center"></el-table-column>
          <el-table-column prop="sex" label="年龄" width="150" align="center"></el-table-column>
          <el-table-column prop="addr" label="地址" width="150" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button @click.prevent="detaileRow(scope.row)" type="text">详情</el-button>
              <el-button @click.prevent="editRow(scope.row)" type="text">修改</el-button>
              <el-button @click.prevent="deleteRow(scope.$index, tableData)" type="text">移除</el-button>
            </template>
          </el-table-column>
        </c-table>
      </c-card>
    </template>
  </c-layout>
  <detaile ref="detaileVue" :disabled="disabled" :showDeaile="showDeaile" @close="close" @updata="addRow"></detaile>
</template>
<script setup>
import { reactive, ref, nextTick } from 'vue'
import { add, update, page } from '@api/psninfo/psninfo.js'
import detaile from './part/detaile.vue'

let detaileVue = ref(null)
let disabled = ref(false)
let formItems = [{ type: 'input', label: '姓名', value: 'name' }]
let rules = {}
let formData = reactive({
  name: '',
})
function submit() {
  pageChange()
}
let showDeaile = ref(false)
let tableData = ref([])
function tabSelectionChange(val) {
  // 多选
  console.log(val)
}
function pageChange(pageNo = 1, pageSize = 10) {
  let config = { pageNo, pageSize }
  page(config).then(res => {
    tableData.value = res.data
  })
}
function deleteRow(index, rows) {
  rows.splice(index, 1)
}
function createRow() {
  showDeaile.value = true
  disabled.value = false
}
function addRow(data) {
  if (data.id) {
    update(data).then(() => {
      pageChange()
    })
  } else {
    add(data).then(() => {
      pageChange()
    })
  }
}
function close() {
  showDeaile.value = false
}
function detaileRow(data) {
  showDeaile.value = true
  disabled.value = true
  // 在表单没有显示前赋值，会被表单认作默认值。猜测
  nextTick(function () {
    detaileVue.value.setDialogForm(data, true)
  })
}
function editRow(data) {
  showDeaile.value = true
  disabled.value = false
  nextTick(function () {
    detaileVue.value.setDialogForm(data, false)
  })
}
</script>
<style lang="scss"></style>
